<template>
  <div class="main">
    <fm-nav-bar title="新闻通知" left-arrow @click-left="onClickLeft" />
    <fm-search
      v-model="value"
      placeholder="请输入新闻名称"
      @search="onSearch"
      maxlength="50"
      clearable
      @clear="onClear"
    >
      <template #left-icon>
        <i class="fm-icon fm-icon-search"></i>
      </template>
      <template #action>
        <div @click.stop="onCancel" class="cancel">取消</div>
      </template>
    </fm-search>
    <div class="main-container">
      <!-- 下拉刷新 -->
      <fm-pull-refresh
        v-model="isRefresh"
        refresh-layer-color="#4b8bf4"
        success-text="刷新成功"
        @refresh="onRefresh()"
      >
        <!-- 上拉加载 -->
        <fm-list>
          <!-- 列表项 -->
          <div class="list">
            <div
              class="list-item"
              v-for="(item, index) in list"
              :key="index"
              @click="goToNewsInfo(item)"
            >
              <div class="list-item-top">
                <div class="item-left">
                  <div class="list-item-title">
                    {{ item.title }}
                  </div>
                  <div class="list-item-time">{{ item.createDate }}</div>
                </div>
              </div>
            </div>
          </div>
        </fm-list>
      </fm-pull-refresh>
      <div v-if="list.length == 0" class="no-result">
        <img
          fit="cover"
          :src="require('@/assets/img/no-result.png')"
          class="img0"
        />
        <div class="text0">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  NavBar,
  Form,
  Field,
  Button,
  Search,
  Cell,
  CellGroup,
  PullRefresh,
  List,
  Sidebar,
  SidebarItem,
  Image,
} from 'fawkes-mobile-lib'
export default {
  name: 'NewsNotice',
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Search.name]: Search,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Image.name]: Image,
  },
  data: () => ({
    value: '',
    activeKey: 0,
    isRefresh: false,
    formList: [
      {
        prjDepName: '渝西水资源配置工程',
        title:
          '重庆史上最大水利工程——渝西水资源配置工程全线开工 将惠及近千万市民',
        userFullname: '系统管理员',
        createDate: '2021-02-02 19:02',

        id: 0,
      },
      {
        prjDepName: '渝西水资源配置工程',
        title: '关于举办“⾮线性筹划⼤会委员会”的会议通',
        userFullname: '系统管理员',
        createDate: '2021-02-01 19:02',

        id: 1,
      },
      {
        prjDepName: '渝西水资源配置工程',
        title: '院内⼯会远远会选举⼤会通知',
        userFullname: '系统管理员',
        createDate: '2021-02-03 19:02',

        id: 2,
      },
    ],
    list: [],
  }),
  watch: {},
  created() {},
  mounted() {
    this.list = [].concat(this.formList)
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isRefresh = false
      }, 1000)
    },
    onClear() {
      this.value = ''
      this.onSearch()
    },
    // 搜索
    onSearch() {
      this.list = this.formList.filter((item) => {
        return item.title.includes(this.value)
      })
      console.log(this.list)
    },
    // 跳转新闻详情
    goToNewsInfo(item) {
      this.$router.push({
        name: 'newsInfo',
        params: { id: item.id },
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="less" scoped>
.main {
  background-color: #f2f3f4 !important;
  height: 100%;
}
.main-container {
  height: calc(100% - 208px);
  overflow: auto;
  padding-top: 12px;
  .no-result {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .img0 {
      width: 286px;
      height: 328px;
    }
    .text0 {
      margin-top: 42px;
      font-size: 32px;
      font-weight: 400;
      color: #999999;
    }
  }
}
.fm-sidebar {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  border-bottom: 2px solid #ebedf0;
}

.fm-pull-refresh {
  overflow: visible;
}
.fm-cell-group {
  margin-top: 24px;
}
.list {
  padding: 0 32px;
  background-color: #fff;
  border-radius: 16px;
}
.list-item {
  padding: 26px 0;
  border-bottom: 1px solid #eee;
}
.list-item-title {
  padding: 16px 0;
  font-size: 28px;
  font-weight: 500;
  color: #333333;
  width: 672px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.list-item-top {
  display: flex;
  justify-content: space-between;
}
.list-item-time {
  font-size: 24px;
  color: #999;
  line-height: 24px;
}
.item-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
